<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<meta name="format-detection" content="telephone=no, email=no" />
	<meta
		name="viewport"
		content="width=device-width,initial-scale=1.0,minimum-scale=1.0, user-scalable=no"
	/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
</head>
<body>

<button onclick='startRecord()'>开始记录</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button onclick='stopRecord()'>停止记录</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button onclick='clearShower()'>清空面板</button>&nbsp;&nbsp;&nbsp;&nbsp;
<br><br>
<button class='btn' data-clipboard-target="#shower">复制数据到剪贴板</button>&nbsp;&nbsp;&nbsp;&nbsp;
<br><br>
<textarea id='shower' style='width: 100%; height: 500px;'></textarea>
<!-- <input id="shower" value="发烧的发烧发到"> -->
</body>

<script>
var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};
var shower = document.querySelector('#shower');
function success(pos) {
  var crd = pos.coords;
  shower.value = shower.value + '\n 时间：' + getNowStr() + '     纬度：' + crd.latitude + '，' + '经度：' + crd.longitude + '；';
};

function getNowStr() {
	var now = new Date();
	var year = now.getFullYear();
	var month = now.getMonth() + 1;
	var day = now.getDate();
	var hour = now.getHours();
	var minutes = now.getMinutes();
	var seconds = now.getSeconds();
	return year+'-'+month+'-'+ day + ' ' + hour + ':' + minutes + ':' + seconds;
}

function mock() {
  shower.value = shower.value + '\n 时间：' + getNowStr() + '     经度：' + '经度值，' + '纬度：' + '经度值；';
};


function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
//   alert('ERROR(' + err.code + '): ' + err.message)
};

var intervalHandler = null;

function clearShower() {
	shower.value = '';
}

function stopRecord() {
	clearInterval(intervalHandler);
}

function startRecord() {
  stopRecord();
	intervalHandler = setInterval(function() {
		// mock();
		navigator.geolocation.getCurrentPosition(success, error, options);
	}, 1000 * 5);
}

function copyDateToClipboard () {
	const cb = new ClipboardJS('.btn', {
		text: document.getElementById('shower')
	})
	cb.on('success', function(e) {
		alert('复制完成！');
		e.clearSelection();
	});
	cb.on('error', function(e) {
		alert('复制失败，请重新操作！');
	});
}
copyDateToClipboard();
</script>
</html>